<template>
  <view class="discount-list">
    <view v-for="item in discountList" :key="item.id" class="discount-card" @click="goToDetail(item.id)">
      <image :src="item.image" class="discount-image"></image>
      <text class="discount-title">{{ item.title }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const discountList = ref([
  { id: 1, image: "/static/forbidden_city.jpg", title: "北京四日追花拍摄秘籍-故宫" },
  { id: 2, image: "/static/great_wall.jpg", title: "长城秋日摄影之旅" },
]);

const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/work/discount_list/discount_detail/discount_detail?id=${id}`
  });
};
</script>

<style>
.discount-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.discount-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.discount-image {
  width: 100%;
  height: 200px;
}
.discount-title {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}
</style>
